<template>
    <div>
        <div v-show="show" style="position:relative;">
            <video :id="yunplay" controls playsinline webkit-playsinline autoplay width="300">
                <source type="application/x-mpegURL" :src="src"/>
            </video>
        </div>
        <div class="image" v-show="!show">
            <img :src='coverImage' class="image" width="300" height="180" @click="show=true">
            <div class="videolistm_min_title">
                <span>{{videoNname}}</span></div>
        </div>

    </div>
</template>

<script>
  import '@/assets/js/ezuikit.js'

  export default {
    name: 'cloudvideoplay',
    props: ['src', 'yunplay', 'coverImage', 'videoNname'],
    data () {
      return {
        show: false,
        player: ''
      }
    },
    mounted () {
      // var player = new EZUIPlayer(this.yunplay)
    },
    updated () {
      if (this.src != '') {
        //如果在mounted中声明，直播地址还未取到，导致视频不显示。所以放在了这里
        this.player = new EZUIPlayer(this.yunplay)
      }
    }
  }
</script>


<style>
    object {
        width: 100%;
    }

    object > embed {
        width: 100%;
        height: 180px;
        position: absolute;
    }

    .image {
        position: relative;
    }

    .videolistm_min_title {
        font-size: 0.14rem;
        color: #fff;
        text-align: center;
        position: absolute;
        top: 80%;
        width: 100%;
    }

    .videolistm_min_title > span {
        padding: 10px 20px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 5px;
    }
</style>
